.p0 {
    padding: 0;
}

.p24 {
    padding: 24px;
}

.pl100 {
    padding-left: 100px;
}

.pr500 {
    padding-right: 500px!important;
}

.br2 {
    border-radius: 2px;
}

.br4 {
    border-radius: 4px;
}

.mr5 {
    margin-right: 5px;
}

.mr8 {
    margin-right: 8px;
}

.mr12 {
    margin-right: 12px;
}

.mr22 {
    margin-right: 22px;
}

.mr-auto {
    margin-right: auto !important;
}

.ml22 {
    margin-left: 22px;
}

.mt12 {
    margin-top: 12px;
}

.mt24 {
    margin-top: 24px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb24 {
    margin-bottom: 24px;
}

.basic-color {
    color: #1890ff;
}

.bg-white {
    background-color: #fff;
}

.flex {
    display: flex;
}

.flex-align-center {
    align-items: center;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-jc-start {
    justify-content: flex-start;
}

.flex-jc-center {
    justify-content: center;
}

.flex-jc-sb {
    justify-content: space-between;
}

.flex-start {
    .flex;
    .flex-align-center;
    .flex-jc-start;
}

.flex-center {
    .flex;
    .flex-align-center;
    .flex-jc-center;
}

.flex-sb {
    .flex;
    .flex-align-center;
    .flex-jc-sb;
}

.flex-sb-start {
    .flex;
    .flex-align-start;
    .flex-jc-sb;
}

.flex-start-start {
    .flex;
    .flex-align-start;
    .flex-jc-start;
}
